import React from 'react';
import Facialmaskylcs from './Facialmaskylcs.js'
import Bnsimg from '../img/diy/boniaosuan.png'
import Bnsicon from '../img/diy/boniaosuanicon.png'
class Facialmaskpage2 extends React.Component {
	constructor(props) {
	    super(props);
	    this.state = {
	        title:"玻尿酸",
            hyaluronicacid:{
                dname:"",
                name:""
            },
            words: [
                {
                    "title": "玻尿酸",
                    "description": "透明质酸具有特殊的保水作用，是目前发现的自然界中保湿性最好的物质，被称为理想的天然保湿因子（Natural moisturizing factor，NMF，例如：2%的纯透明质酸水溶液能牢固地保持98%水分。透明质酸是一种多功能基质，透明质酸（玻尿酸）HA广泛分布于人体各部位。其中皮肤也含有大量的透明质酸。人类皮肤成熟和老化过程也随着透明质酸的含" +
                                   "量和新陈代谢而变化，它可以改善皮肤营养代谢，使皮肤柔嫩、光滑、去皱、增加弹性、防止衰老，在保湿的同时又是良好的透皮吸 收促进剂。与其他营养成分配合使用，可以起到促进营养吸收的更理想效果。同样是透明质酸的产品,因为原料来源及制成技术的差别,对效果有明显的影响.产品的浓度不能作为选择产品的参考,纯度、分子量、3D立体结构才会直接影响透明质酸的吸水效果." + 
                                   "通常分子量愈大、网状结构愈完整,有最好的吸水效果.坊间保养品、化妆品盛行,但许多业者自制的透明质酸,便宜,可是不一定有效果.甚至有人推行的口服的透明质酸,经过肠胃吸收之后会分解成醣类及氨基酸的小单位分子,还是必须透过自体合成等步骤才能生成在皮肤、结缔组织中,其效果也必须要打折扣。"
                }
            ]
	    }
	}
	componentWillMount(){

	}
    componentDidMount(){
        
        this.selectCondition()
    }
    
    selectCondition(){
        var _this=this
        var clickEvt=function(ele){
            if(ele.flag){
                let hyaluronicacid
                if(ele.index==0){
                    hyaluronicacid={
                        dname:"福瑞达玻尿酸",
                        name:"bolisuan-a"
                    }
                }else{
                    hyaluronicacid={
                        dname:"其他品牌玻尿酸",
                        name:"bolisuan-b"
                    }
                }
                _this.setState({
                    hyaluronicacid:hyaluronicacid
                })
            }else{
                _this.setState({
                    hyaluronicacid:{
                        dname:"",
                        name:""
                    }
                })
            }
            _this.props.callback(_this.state.hyaluronicacid)
            var a = [];
            var p = ele.parentNode.children;
            for(var i =0;i<p.length;i++) {
                if(p[i] !== ele) a.push(p[i]);
            }
            for(let j=0;j<a.length;j++){
                a[j].classList.remove("fmp-select-content-active")
                a[j].querySelector(".fmp-sc-icon").classList.remove("fmp-sc-icon-active")
                a[j].flag=false;
            }
            ele.classList.toggle("fmp-select-content-active")
            ele.querySelector(".fmp-sc-icon").classList.toggle("fmp-sc-icon-active")
        }
        var showTab=function(ele){     
            if(ele.flag==true){
                content[0].classList.remove("fmp-select-tip-active")
                for(let i = 0, len = items.length; i < len; i++) {
                    if(items[i] === ele) {
                        contents[i].classList.add("fmp-select-tip-active")
                    } else {
                        contents[i].classList.remove("fmp-select-tip-active")
                    }
                }
            }else{
                content[0].classList.add("fmp-select-tip-active")
                for(let i = 0, len = items.length; i < len; i++) {
                    contents[i].classList.remove("fmp-select-tip-active")
                }
            }
        }
        var items=document.querySelectorAll(".fmp2-select-content");
        var content=document.querySelectorAll(".fmp2-st-exp")
        var contents=document.querySelectorAll(".fmp2-st-explain");
        for(let i=0;i<items.length;i++){
            items[i].flag=false
            items[i].index=i
            items[i].addEventListener("click",function(e){
                this.flag=(this.flag==true)?false:true
                clickEvt(e.currentTarget)
                showTab(this)
            });
        }
    }
    clickScroll(){
        this.props.clickBack(2)
    }
    returnOrder(){
        this.props.clickRetOrder(6)
    }
    render() {
        return (
            <div className="fmp-container" style={{top: "100%"}} id="fmpage2">
            	<div className="fmt-container boxshaw">
                    <div className="fmt-container-circle">
                        <div className="fmt-container-circle-line"></div>
                    </div>
                    <span style={{fontSize:"0.5rem"}}>{this.state.title}</span>
                </div>
            	<Facialmaskylcs words={this.state.words}/>
            	<div className="fmp-sign">
                    <div className="fmp-sign-img">
                        <img src={Bnsimg}/>
                    </div>
                    <div className="fmp-sign-wz">
                        <p>&nbsp;小懒系列漫画之</p>
                        <p>《萌拼面膜研究》</p>
                    </div>
                     {this.props.isreturn?
                    <div className="fmp-sign-return" onClick={this.returnOrder.bind(this)}>
                        返回订单
                    </div>:""}
                </div>
                <p className="bn-tishi">《《请上下滑动切换选择成分》》</p>
                <div className="fmp-select boxshaw">
                    <div className="fmp-select-title">
                        <p>点击下面挑挑<span className="fmp-select-title-span">玻尿酸</span>吧<i className="iconfont">&#xe616;</i></p>
                    </div>
                    <ul className="fmp-select-row"> 
                        <li className="fmp-select-content fmp2-select-content">
                            <i className="iconfont fmp-sc-icon">&#xe73d;</i>                 
                            <div className="fmp-sc-detail">
                                <img src={Bnsicon}/>
                                <p>福瑞达</p>
                                <p>玻尿酸</p>
                            </div>
                        </li>
                        <li className="fmp-select-content fmp2-select-content">
                            <i className="iconfont fmp-sc-icon">&#xe73d;</i>
                            <div className="fmp-sc-detail">
                                <img src={Bnsicon}/>
                                <p>其他品牌</p>
                                <p>玻尿酸</p>
                            </div>
                        </li>
                    </ul>
                    <div className="fmp-select-tip">
                        <div className="fmp2-st-exp fmp-select-tip-active"><i className="iconfont fmp-select-tip-icon">&#xe629;</i><span className="fmp-select-tip-iconwz">功效</span><p className="fmp-select-tip-wz">肌肤饥渴，玻尿酸来帮忙，玻尿酸是影响面膜功效的重要元素哦！</p></div>
                        <div className="fmp2-st-explain"><i className="iconfont fmp-select-tip-icon">&#xe629;</i><span className="fmp-select-tip-iconwz">功效</span><p className="fmp-select-tip-wz">采用世界顶级厂家的原料，分子量稳定，保湿修护功效稳定</p></div>
                        <div className="fmp2-st-explain"><i className="iconfont fmp-select-tip-icon">&#xe629;</i><span className="fmp-select-tip-iconwz">功效</span><p className="fmp-select-tip-wz">采用普通厂家的原料，分子量相对稳定，能达成基本功效</p></div>
                    </div>
                    <div className="fmp-select-bottom">
                        <i className="iconfont" onClick={this.clickScroll.bind(this)}>&#xe66f;</i>
                    </div>
                </div>
            </div>
        )
    }
}


export default Facialmaskpage2;